import '../../style/resource.less';
import React, {
    Component
} from 'react'
import {
    observer
} from 'mobx-react';
import {
    WhiteSpace,
    Flex,
    Icon,
} from "weaver-mobile";
import {
    withRouter
} from 'react-router-dom';
const {
    Item
} = Flex;

const icons = {
    item_workflow: 'process',
    item_doc: 'collaboration-application-selected',
    item_custom: 'client',
    item_project: 'xiangmu',
    item_cpt: 'asset',
    item_cowork: 'cooperation-exchange-hot',
    item_weibo: 'blog-bolg'
};

@withRouter
@observer
export default class ResourceInfo extends Component {
    handleClick = (name) => {
        const {
            store
        } = this.props, {
            hrmId
        } = store;

        const isExist = window.em && window.em.checkJsApi('openLink');
        if (!isExist) return;

        switch (name) {
            case 'item_workflow':
                window.em.openLink({
                    url: `/spa/workflow/static4mobile/index.html#/center/doing?moduleid=1&resourceid=${hrmId}`,
                    openType: 2,
                    sysId: window.localStorage.emobile_ec_id
                });
                break;
            case 'item_doc':
                window.em.openLink({
                    url: `/spa/document/static4mobile/index.html#/systemDoc?resourceid=${hrmId}`,
                    openType: 2,
                    sysId: window.localStorage.emobile_ec_id
                });
                break;
            case 'item_custom':
                window.em.openLink({
                    url: `/spa/crm/static4mobile/index.html#/hrmCustomerList/${hrmId}`,
                    openType: 2,
                    sysId: window.localStorage.emobile_ec_id
                });
                break;
            case 'item_project':
                window.em.openLink({
                    url: `/spa/prj/static4mobile/index.html#/myprojectsingle?search_resourceid=${hrmId}`,
                    openType: 2,
                    sysId: window.localStorage.emobile_ec_id
                });
                break;
            case 'item_cpt':
                window.em.openLink({
                    url: `/spa/cpt/static4mobile/index.html#/myassetsingle?hrmid=${hrmId}`,
                    openType: 2,
                    sysId: window.localStorage.emobile_ec_id
                });
                break;
            case 'item_cowork':
                window.em.openLink({
                    url: `/spa/cowork/static4mobile/index.html#/hrmjion?searchHrmid=${hrmId}`,
                    openType: 2,
                    sysId: window.localStorage.emobile_ec_id
                });
                break;
            case 'item_weibo':
                window.em.openLink({
                    url: `/spa/blog/static4mobile/index.html#/hisBlog/${hrmId}`,
                    openType: 2,
                    sysId: window.localStorage.emobile_ec_id
                });
                break;
        }
    }

    render() {
        const {
            store
        } = this.props;
        const {
            catelog
        } = store;
        if (catelog.length == 0)
            return <div></div>
        return (
            <div>
                <div className='items catelog'>
                    <Flex wrap='wrap'>
                        {
                            catelog.map((d, i) => {
                                const {
                                    name,
                                    label,
                                    num,
                                } = d;

                                const color = d[`font-color`];

                                return (
                                    <div key={i} className='item' onClick={() => this.handleClick(name)}>
                                        <div>
                                            <span style={{color:color}}>
                                                <Icon type={icons[name]} size='sm'/>
                                            </span>
                                        </div>
                                        <div style={{color: color}} className='item-num'>
                                            <span className='item-label hrm-over-flow'>{label}</span>
                                            <span>{num}</span>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </Flex>
                </div>
                <WhiteSpace size='md' />
            </div>
        )
    }
}